<template>
<div class="home">
    <div class="home-top">
        <div class="home_search" @click="goTrs">
            <div class="search_input">点击搜索商品名或粘贴宝贝标题</div>
        </div>
        <!-- <div id="index">
          <ul-slider :catList='catList' @sliderClick='changeTab'></ul-slider>
        </div> -->
        <div class="okShow" v-if="tabNav">
                <div class="swiper-container" id="swiper1">
                      <swiper :options="swiperOption" ref="mySwiper">
                        <!-- slides -->
                        <swiper-slide class="swiper-slide" v-for="(picitem,index) in items" :key="index"  :data-type="picitem.type" :data-title="picitem.title" :data-other_id="picitem.other_id" :data-link="picitem.link" :style="{backgroundImage:'url('+picitem.image+')',backgroundSize:'100%'}">
                        </swiper-slide>
                        <div class="swiper-pagination"  slot="pagination">
                            <span v-for="(item,index) in items" :key="index" class="swiper-pagination-bullet"></span>
                        </div>
                      </swiper>
                </div>
                <div class="home_menu">
                        <div class="menu_nav"  v-for="(item,index) in kong" :key="index" ><img :src="item.logo" @click="goTo(item.type,item.other_id,item.name,item.link)"><p>{{item.name}}</p></div>
                        <div class="clear"></div>
                </div>
                <div class="home_mater" v-if="killState==1">
                    <div class="mater_left"><img :src="kill.image"  @click="goTo(kill.type,kill.other_id,kill.title,kill.link)"></div>
                    <div class="mater_right">
                        <router-link :to="{path: '/seckill'}">
                            <div class="mater_right_moods" :style="{backgroundImage:'url('+recommend.image+')',backgroundSize:'100%'}">
                                <div class="moods_exp">
                                    <div class="moods_recom"></div>
                                    <div class="moods_fash" ></div>
                                    <!-- <div class="moods_special" :style="{backgroundImage:'url('+recommend.icon+')',backgroundSize:'100%'}"></div> -->
                                </div>
                                <div class="moods_cont">
                                    <div class="ping">
                                        <div class="ping_num" v-text="hour"></div>
                                        <span>:</span>
                                        <div class="ping_num" v-text="minute"></div>
                                        <span>:</span>
                                        <div class="ping_num" v-text="second"></div>
                                    </div>
                                    <!-- <div class="moods_goods"  >
                                        <img  v-for="(item,index) in recommend.image_arr" :key="index" :src="item">
                                    </div> -->
                                </div>
                                <!-- <div class="clear"></div> -->
                            </div>
                        </router-link>  
                        <router-link :to="{path: '/listing',query:{'id':2,'type':5,title:newGood.title}}">  
                            <div class="mater_right_new" :style="{backgroundImage:'url('+newGood.image+')',backgroundSize:'100%'}">
                                <!-- <div class="moods_exp">
                                    <div class="moods_recom" v-text="newGood.title"></div>
                                    <div class="moods_fash" v-text="newGood.intro"></div>
                                    <div class="moods_prom" :style="{backgroundImage:'url('+newGood.icon+')',backgroundSize:'100%'}"></div>
                                </div>
                                <div class="moods_cont  moods_bottom">
                                    <div class="lun"></div>
                                    <div class="moods_goods">
                                        <img  v-for="(item,index) in newGood.image_arr" :key="index" :src="item">                                    
                                    </div>
                                    <div class="goods_new">new</div>
                                </div>
                                <div class="clear"></div> -->
                            </div>
                        </router-link>    
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="home_repert" v-if="cool.status==1">
                  <div class="repert_top">
                      <div class="repert_left">
                          <div class="repert_sign"></div>
                          <div class="repert_name" v-text="cool.title"></div>
                          <div class="repert_exp">买到停不下来</div>
                      </div>
                      <div class="repert_right"></div>
                      <div class="repert_goods" id="repert">
                          
                         <img  v-for="(item,index) in  cool.ad_list" :key="index" :src="item.image" @click="goTo(item.type,item.other_id,item.title,item.link)">
                          
                      </div>
                  </div>
                </div>
                <div class="home_super" v-if="push.status==1">
                    <div class="super_top">
                        <div class="super_sign"></div>
                        <div class="super_name" v-text="push.title"></div>
                    </div>
                    <div class="super_list" v-for="(item,index) in push.push_list" :key="index">
                        <div class="super_host">
                            <img :src="item.top.image" @click="goTo(item.top.type,item.top.other_id,item.top.title,item.top.link)">
                        </div>  
                        <div class="super_assist">
                            <img :src="item.left.image" @click="goTo(item.left.type,item.left.other_id,item.left.title,item.left.link)">
                            <img :src="item.center.image"  @click="goTo(item.center.type,item.center.other_id,item.center.title,item.center.link)">
                            <img :src="item.right.image" @click="goTo(item.right.type,item.right.other_id,item.right.title,item.right.link)">
                        </div>
                    </div>
                </div>
          </div>   
          <div class="home_activity" v-if="activity.status==1">
            <div class="activity_top">
                    <div class="activity_left">
                        <div class="activity_sign"></div>
                        <div class="activity_name" v-text="activity.title"></div>
                    </div>
                </div>
                <div class="activity_img" v-if="activity"><img :src="activity.ad_one.top.image" @click="goTo(activity.ad_one.top.type,activity.ad_one.top.other_id,activity.ad_one.top.title,activity.ad_one.top.link)"></div>    
            </div>
            <div class="home_mater" v-if="activity.status==1">
                <router-link :to="{path: '/listing',query:{'id':3,'type':6,'title':activity.ad_one.left.title}}">
                    <div class="mater_left" v-if="activity"><img :src="activity.ad_one.left.image"></div>
                </router-link>
                <div class="mater_right ">
                    <router-link :to="{path: '/listing',query:{'id':4,'type':7,'title':activity.ad_one.right_top.title}}">  
                        <div class="mater_right_moods" v-if="activity" :style="{backgroundImage:'url('+activity.ad_one.right_top.image+')',backgroundSize:'100%'}">
                            <!-- <div class="moods_explain">
                                <div class="moods_recom">{{activity.ad_one.right_top.title}}<span class="horn" :style="{backgroundImage:'url('+activity.ad_one.right_top.icon+')',backgroundSize:'100%'}"></span></div>
                                <div class="moods_fash">{{activity.ad_one.right_top.intro}}</div>
                                <div class="moods_pro" :style="{backgroundImage:'url('+activity.ad_one.right_top.image_intro+')',backgroundSize:'100%'}"></div>
                            </div>
                            <div class="moods_article" v-if="activity"><img :src="activity.ad_one.right_top.image">
                                <div class="moods_new">new</div>
                            </div>
                            <div class="clear"></div> -->
                        </div>
                    </router-link>
                    <router-link :to="{path: '/listing',query:{'id':5,'type':8,'title':activity.ad_one.right_bottom.title}}">      
                        <div class="mater_right_new" v-if="activity" :style="{backgroundImage:'url('+activity.ad_one.right_bottom.image+')',backgroundSize:'100%'}">
                            <!-- <div class="moods_share">{{activity.ad_one.right_bottom.title}}<span class="fresh" :style="{backgroundImage:'url('+activity.ad_one.right_bottom.icon+')',backgroundSize:'100%'}"></span></div>
                            <div class="moods_list" v-if="activity">
                                <img v-for="(item,index) in  activity.ad_one.right_bottom.image_arr" :key="index" :src="item"  @click="goMore">
                            </div> -->
                        </div>
                    </router-link>    
                </div>
                <div class="clear"></div>
            </div>   
          <div class="home_super">
                <div class="super_top">
                    <div class="super_sign"></div>
                    <div class="super_name">猜你喜欢</div>
                </div>
          </div>      
          <div class="home_list">
               <div class="list_cont" >
                    <div class="list_info" v-for="(item, index) in goods" :key="index">
                        <div v-if="item.type==2"  class="infor_img"  @click="goNews(item.id)">
                            <img :src="item.pict_url">
                        </div>
                        <div v-if="item.type==1"  @click="goDetail(item.id)">
                            <div class="list_img">
                                <img class="ocn_img" :src="item.pict_url">
                            </div>
                            <div class="list_menu">
                                <div class="list_title">{{item.title}}</div>
                                <div class="list_store"><span v-text="item.user_type==0?'淘宝':'天猫'" class="store_type"></span><span class="store_title"> {{item.shop_title}}</span></div>
                                <div class="quan_num">
                                    <span class="quan_info"><span class="num">{{item.coupon_money}} </span> 元券</span>
                                </div>
                                <div class="list_rebate">
                                    <div class="rebate_num">奖 ¥ {{item.reward_price}}</div>
                                    <div class="list_sale">销量{{item.volume}}</div>  
                                </div> 
                                <div class="list_price">
                                        <div class="price_now"><small>¥</small> {{item.coupon_price}} <small>券后</small></div>
                                        <div class="price_old">¥ {{item.zk_final_price}}</div>
                                </div>
                                  
                            </div>
                        </div>    
                    </div>  
                    <div v-if="load" class="loader">正在加载中...</div>  
                    <div v-if="bottom" class="bottom">已经到底啦</div>  
              </div>
          </div>   

    </div>
    <temp_footer></temp_footer>  
     <temp_top></temp_top>   
</div>
</template>

<script>
import slider from '../components/slider'
import  temp_footer from './base.vue'
import  temp_top from './common.vue'
export default {
  name: 'Home',
  data() {
    const that = this;
        return {
            swiperOption: {
                    //滑动方向
                   direction: "horizontal",
                   //循环
                   loop: true,
                   //设定初始化时slide的索引
                   //自动播放
                  autoplay:3000,
                  autoplayDisableOnInteraction: false,
                   //滑动速度
                   speed: 2000,
                  slidesPerView:"auto",
                  centeredSlides:true,
                  spaceBetween:20,
                  centeredSlides:true,
                  loopAdditionalSlides:100,
                   on: {
                     //滑动之后回调函数
                     slideChangeTransitionStart: function() {
                       /* realIndex为滚动到当前的slide索引值 */
                       that.imgIndex= this.realIndex - 1;
                     },
                   },
                   onClick: function (swiper, event) {
                       let that=this;
                        let datatype =event.target.dataset.type;
                            if(datatype==1||datatype==2){
                                location.href=event.target.dataset.link;
                            }else if(datatype==3||datatype==4){
                                location.href="#/list?id="+event.target.dataset.other_id+"&title="+event.target.dataset.title;                              
                            }else if(datatype==5||datatype==6){
                                 location.href="#/detail?id="+event.target.dataset.other_id;  
                            }else if(datatype==7){
                                location.href="#/activity?id="+event.target.dataset.other_id+"&title="+event.target.dataset.title;
                            }else if(datatype==8){
                               location.href="#/news?id="+event.target.dataset.other_id;  
                            }else if(datatype==9){
                                location.href="#/redpocket?title="+event.target.dataset.title;  
                            }else{
                                Toast("信息有误，请联系客服！");
                            }
                                
                    },
                   //分页器设置
                   pagination: '.swiper-pagination',
                   paginationClickable: true,
                },
          catList: [],
                items: [
                 {src: '//xunjiangzhimei.oss-cn-hangzhou.aliyuncs.com/upload/image/20190905/2f1b41cc29c9f3da7ea8396d3dbedc3cd18078eb.png',url:''},
                
                ],
          number:6,
          tabNav:true,
          load:false,
          bottom:false,
          goods:"", 
          recommend:"",//今日秒杀右侧上的图   
          newGood:"",//今日秒杀右侧下的图   
          kill:"",//今日秒杀左侧图
          activity:"",//五月活动
          push:"",//超级推送
          cool:"",//清单好物
          page:1,
          limit:20,   
          cate_id:"", 
          kong:"",
          times:"",//倒计时秒数
          hour:"",//时
          minute:"",//分
          second:"",//秒
          startPointX: 0,//清单好物三参数
          changePointX: 0,
          showIndex: 0,
          killState:1,
          screenWidth: document.body.clientWidth,//屏幕宽度
        }
  },
  components: {
    'ul-slider': slider,
     "temp_footer":temp_footer,
      "temp_top":temp_top,
  },
  mounted() {
    const that = this
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
          })()
        }
  },
  created(){
       this.getTime();  
  },
  methods: {
      //清单好物三函数
    show(index){
      var  screenWidth=this.screenWidth-15;
      this.changePointX=this.startPointX;
      let slider = document.getElementById('repert');
      slider.style.marginLeft=`-${screenWidth*index}px`;
    },
    touchstart(e){
      this.startPointX = e.changedTouches[0].pageX;
    },
    touchmove(e){
      var  dox= this.cool.ad_list.length/2;
      if(this.startPointX==this.changePointX){
        return ;
      }
      let currPointX = e.changedTouches[0].pageX;
      let leftSlide = this.startPointX-currPointX;
      if(leftSlide>30&&this.showIndex<dox-1){
        this.show(++this.showIndex)
      }else if(leftSlide<-30&&this.showIndex>0){
        this.show(--this.showIndex)
      }
    },
    changeTab(id) {
        this.goods="";
        this.page=1;
        this.load=false;
        this.bottom=false;
      if(id==201){
          this.tabNav=true;
          this.cate_id="";
            this.$axios.get('/v1/common/itemList',{
                params: {
                    limit: 20,
                    page:1,
                }
            }).then(res => {
                var result=res.data;
                if(result.code==200){
                this.goods=result.data;
                this.scroll(this.goods);
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });
      }else{
          this.tabNav=false;
          this.cate_id=id;
            this.$axios.get('/v1/common/itemList',{
                params: {
                    limit: 20,
                    page:1,
                    cate_id:id,
                }
            }).then(res => {
                var result=res.data;
                if(result.code==200){
                this.goods=result.data;
                this.scroll(this.goods);
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });
      }
    },
    goMore(){

    },
    timer() {
        if (this.times > 0) {
            this.times--;
            var hh = parseInt(this.times/3600);                
            if(hh<10) hh = "0" + hh;  
            this.hour=hh;
            var mm = parseInt((this.times-hh*3600)/60);  
            if(mm<10) mm = "0" + mm;  
            this.minute=mm;
            var ss = parseInt((this.times-hh*3600)%60);  
            if(ss<10) ss = "0" + ss;  
            this.second=ss;
            setTimeout(this.timer, 1000);
        } else{
             this.getTime();     
        }
    }, 
    getTime(){
        //获取时间倒计时 
        this.$axios.get('/v1/common/getKillKeep').then(res => {
            var result=res.data;
            if(result.code==200){
                var theTime=result.data.kill_time;
                this.times=theTime;
                if(theTime==0){
                    this.hour='00';
                    this.minute='00';
                    this.second='00';
                    return false;
                }
                var hh = parseInt(theTime/3600);                
                if(hh<10) hh = "0" + hh;  
                this.hour=hh;
                var mm = parseInt((theTime-hh*3600)/60);  
                if(mm<10) mm = "0" + mm;  
                this.minute=mm;
                var ss = parseInt((theTime-hh*3600)%60);  
                if(ss<10) ss = "0" + ss;  
                this.second=ss;
                this.timer();
            }else{
                 Toast(result.msg)
            }
        }, res => {
            console.log("error");
        }); 
    },
    goTo(e,f,g,h){
        if(e==1||e==2){
            location.href=h;
        }else if(e==3||e==4){
           this.$router.push({path:'/list',query:{id:f,type:e,title:g}});  
        }else if(e==5||e==6){
            this.$router.push({path:'/detail',query:{id:f}});  
        }else if(e==7){
            this.$router.push({path:'/activity',query:{id:f,title:g}});
        }else if(e==8){
            this.$router.push({path:'/news',query:{id:f}});
        }else if(e==9){
             this.$router.push({path:'/redpocket',query:{title:g}});
        }else{
             Toast("信息有误，请联系客服！");
        }
    },
     scroll(goods) {
            let flag = false;
            window.onscroll = () => {
            //  let bottomOfWindow = document.body.scrollHeight - document.documentElement.scrollTop - window.innerHeight <=100;
            //   Toast(goods)
              let top = document.documentElement.scrollTop || document.body.scrollTop; // 滚动条在Y轴上的滚动距离
              let vh = document.compatMode == 'CSS1Compat' ? document.documentElement.clientHeight : document.body.clientHeight; // 浏览器视口的高度
              let height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight); // 文档的总高度
              //  if (top + vh >= height) { // 滚动到底部
              let bottomOfWindow =top + vh >= height;
            if(bottomOfWindow&&flag==false){
                flag=true;
                this.page++;
                    var that = this;
                    that.load=true;
                    var params = {
                            page: this.page,
                            cate_id:this.cate_id,
                            limit:20,
                    }
                    this.$axios.get( //传参发起请求
                        '/v1/common/itemList', {
                           params
                        }
                    ).then(function (response) { //接口返回数据
                    var data=response.data.data;
                        if(data.length<=0){
                            that.bottom=true;
                            that.load=false;
                        }else{
                            for(var i =0;i<data.length;i++){
                                goods.push(data[i]);
                            };
                            that.load=false;
                            flag=false;
                        }

                    }, response => {
                        console.log("error");
                    });
                }
            }
        },
      goNews(e){
          this.$router.push({path:'/news',query:{id:e}});
      },
      goDetail(e){
          this.$router.push({path:'/detail',query:{id:e}});
      },  
      goTrs(){
        this.$router.push({path:'/transit'});
      },
  },
   beforeRouteEnter (to, from, next) {
    if ( from.name === 'Detail' || from.name === 'Transit') {
        if(from.query.isShare){
            to.meta.isUseCache = false;     
        }else{
            to.meta.isUseCache = true;
        }
      
    } else {
      to.meta.isUseCache = false;
    }
    document.title="寻匠之美";
    next()
  },
   activated() {
      
       if(!this.$route.meta.isUseCache){
             //人气推荐
            this.$axios.get('/v1/common/adListV1_4').then(res => {
                var result=res.data;
                console.log(result);
                if(result.code==200){
                this.killState=result.data.kill.status;
                this.recommend=result.data.kill.ad_one.right_top;   
                this.newGood=result.data.kill.ad_one.right_bottom;  
                this.kill=result.data.kill.ad_one.left;     
                this.activity=result.data.activity;   
                this.push=result.data.push;
                this.cool=result.data.goods;
                
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });    
            
            //banner图
             this.$axios.get('/v1/common/getAdvertV1_4',{
                params: {
                    type:1,
                }
            }).then(res => {
                var result=res.data;
                if(result.code==200){
                    this.items=result.data;
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });           
            
            //金刚区
            this.$axios.get('/v1/common/tabListV1_4').then(res => {
                var result=res.data;
                if(result.code==200){
                    this.kong=result.data;
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });

            
            //商品列表
            this.$axios.get('/v1/common/itemList',{
                params: {
                    limit: 20,
                    page:1,
                }
            }).then(res => {
                var result=res.data;
                if(result.code==200){
                this.goods=result.data;
                this.scroll(this.goods);
                }else{
                    Toast(result.msg)
                }
            }, res => {
                console.log("error");
            });
            // 恢复成默认的false，避免isUseCache一直是true，导致下次无法获取数据
             this.$route.meta.isUseCache=false

       }

   }    
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home{height:100%;}
.home-top{width:100%;height:340px;padding-top:30px;background:url('/static/images/home_back.png') no-repeat center center;background-size:100% 100%;}
.home_search{width:678px;height:68px;margin:0 auto;margin-bottom:36px;display:flex;justify-content: space-between;}
.search_input{width:100%;height:100%;color:#9B9B9B;font-size:24px;text-indent:16px;line-height:68px;border-radius:68px;background:#FFF url("/static/images/search.png") no-repeat right 20px center;background-size:40px 40px;}
.wrapper{height:312px;}
/* .swiper-container .swiper-slide{width:80%!important;margin:0 40px;}
.swiper-container .swiper-slide img{width:100%;} */
#slider{width:100%;overflow:hidden;padding:0 0 .22rem 0;}
.swiper-container,.swiper-container2{width:100%;height:312px;overflow:visible!important;position:relative;}
#swiper1 .swiper-container{width:100%;overflow: hidden!important;}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide{width:698px;border-radius:40px;}
.swiper-container .swiper-wrapper .swiper-slide img{width:100%;height:312px;border-radius:40px;}
#swiper1 .swiper-container .swiper-wrapper .swiper-slid-prev img{margin-top:0.18rem;height:312px!important;}
#swiper1 .swiper-container .swiper-wrapper .swiper-slide-next img{height:312px!important;}
.swiper-container .swiper-wrapper .swiper-slide-active{width:698px;}
.swiper-pagination{bottom:0.1rem!important;}
.swiper-pagination-bullet{width:8px!important;height:8px!important;background:#fff!important;border-radius:4px!important;}
.home_menu{
    width:700px;
    margin:0 auto;
    margin-top:28px;
}
.home_menu .menu_nav{
     width: 104px;
     height:168px;
     float: left;
     border-radius:52px;
     margin-right:40px; 
     text-align:center;
     padding-bottom: 12px;/* 做到宽高相等 */
      
}
.home_menu .menu_nav:nth-child(5n){margin-right:0px;}
.home_menu .menu_nav img{width:92px;height:92px;}
.home_menu .menu_nav p{line-height:16px;font-size:24px;color:#333334;font-family:'regular';font-weight:400}
.home_mater{width:700px;height:364px;margin:0 auto;margin-top:20px;}
.home_mater .mater_left{width:296px;height:100%;float: left;} 
.home_mater .mater_left img{width:100%;border-radius:40px 0 0 40px;height:100%;}
.home_mater .mater_right{float:right;width:402px;height:184px;border-left:2px solid #FFF;}
.mater_right .moods_exp{float: left;padding-left:20px;width:148px;}
.mater_right .moods_cont{width:232px;float: left;}
.mater_right .moods_cont .ping{width:90%;height:54px;padding-top:14px;display:flex;justify-content:flex-start;}
.mater_right .moods_cont .lun{height:50px;}
.ping .ping_num{width:40px;height:40px;border-radius:50%;background:#D7B794;font-size:24px;color:#FFFFFF;line-height:40px;text-align: center;}
.ping span{padding:0 8px;color:#D7B794;}
.mater_right .moods_explain{float: left;padding-left:20px;}
.mater_right .moods_goods{width:100%;}
.mater_right .moods_goods img{width:104px;height:104px;margin-right:14px;}
.mater_right .moods_goods img:last-child{margin-right:0;}
.moods_bottom{position: relative;}
.moods_bottom .goods_new{position:absolute;width:40px;height:40px;background:#FE3B30;border-radius:40px 40px 40px 0;line-height:40px;text-align: center;font-size:16px;color:#fff;top:20px;left:90px;}
.mater_right .mater_right_moods{height:182px;border:2px solid #FFF;border-left:none;border-radius:0 40px 0 0;overflow: hidden;}
.mater_right .mater_right_new{height:178px;height:176px;border-right:2px solid #F2F2F2;border-bottom:2px solid #F2F2F2;border-radius:0 0 40px 0;}
.mater_right  .moods_recom{font-size:28px;font-family:"semibold";color:#333334;font-weight:600;margin-top:20px;margin-bottom:14px;}
.mater_right  .moods_fash{color:#9B9B9B;font-size:24px;font-family:'medi';margin-bottom:12px;}
.mater_right  .moods_special{width:68px;height:24px;margin-top:8px;}
.mater_right  .moods_prom{width:56px;height:24px;margin-top:8px;}
.mater_right  .horn{width:30px;height:30px;background:url("/static/images/horn.png") no-repeat center center;background-size:100% 100%;display: inline-block;margin-left:4px;}
.mater_right  .fresh{width:66px;height:24px;background:url("/static/images/fresh.png") no-repeat center center;background-size:100% 100%;display: inline-block;margin-left:4px;margin-top:2px;}
.activity_top{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  margin-bottom:26px;
}
.home_activity{width:700px;margin:0 auto;margin-top:36px;}
.home_activity .activity_right{width:36px;height:36px;background:url(/static/images/home_go.png) no-repeat center center;background-size:100% 100%; }
.activity_left .activity_name{font-size:32px;color:#333334;font-family:'bold';font-weight:bolder;}
.home_activity .activity_left{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  line-height:30px;
}
.activity_left .activity_sign{width:5px;height:30px;background:#191D3A;border-radius:2px;margin-right:16px;}
.activity_left span{font-size:16px;padding:0px 10px;background:#FFE514;border-radius:4px;margin-left:8px;font-weight:600;}
.home_activity .activity_img img{width:100%;border-radius:20px;}
.home_line{width:700px;height:2px;border-top:2px solid #E4E4E4;margin:0 auto;margin-top:26px;margin-bottom:26px;}
.mater_right .moods_article{width:104px;height:116px;float: left;margin-top:44px;margin-left:24px;position: relative;}
.moods_article .moods_new{position:absolute;width:40px;height:40px;background:#FE3B30;border-radius:40px 40px 40px 0;line-height:40px;text-align: center;font-size:16px;color:#fff;top:-24px;left:120px;}
.mater_right .moods_article img{width:100%;}
.mater_right .moods_pro{width:124px;height:40px;margin-top:16px;}
.mater_right_new .moods_share{font-size:28px;color:#333334;font-weight:600;padding-left:20px;padding-top:20px;font-family:'semibold'}
.mater_right_new .moods_list{padding-left:20px;  display: flex;flex-wrap: wrap;justify-content:space-between;justify-items: center;text-align: justify;}
.mater_right_new .moods_list img{width:98px;height:110px;}
.mater_right_new .moods_list img:last-child{margin-right:28px;}
.home_repert{width:700px;margin:0 auto;margin-top:40px;overflow:hidden;}
.repert_top{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  padding-top:4px;
}
.repert_top .repert_left{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  line-height:30px;
}
.repert_left .repert_sign{width:5px;height:30px;background:#191D3A;border-radius:2px;margin-right:16px;}
.repert_left .repert_name{font-size:32px;font-family:'semibold';font-weight:600;}
.repert_left .repert_exp{font-size:24px;font-weight:400;font-family:'regular';color:#9B9B9B;margin-left:18px;}
.home_repert .repert_right{font-size:24px;color:#9B9B9B;}
.home_repert .repert_right span{font-size:32px;color:#333334;font-weight:600;font-family:'semibold';}
.home_repert .repert_goods{margin-top:26px;overflow: hidden; white-space: nowrap;transition: 1s;overflow-x:scroll;-webkit-overflow-scrolling: touch;}
/* .home_repert .repert_goods .swiper-container {
      width: 100%;
      height: 100%;
    }
.home_repert .repert_goods    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    } */
.home_repert .repert_goods img{width:286px;border-radius:40px;margin-right:20px;display: inline;}
.home_whole{width:700px;margin:0 auto;margin-top:60px;}
.whole_top{
 display: flex;
 justify-content: flex-start;
 line-height:36px;
 margin-bottom:26px;
}
.whole_top .whole_name{font-size:32px;font-family:'bold';font-weight:800;}
.whole_top .whole_sign{width:5px;height:30px;background:#191D3A;border-radius:2px;margin-right:16px;margin-top:4px;}
.whole_top .whole_arrow{width:124px;height:24px;background:url(/static/images/whole.png) no-repeat center center;background-size:100% 100%;margin-left:40px;}
.home_whole .whole_goods{ width:700px;white-space: nowrap;overflow-x:scroll;-webkit-overflow-scrolling: touch;}
.home_whole .whole_goods img{width:300px;height:400px;border-radius:40px;margin-right:28px;}
.whole_goods .whole_div{width:300px;margin-right:24px;}
.home_pop{width:700px;margin:0 auto;margin-top:40px;}
.pop_top{
 display: flex;
 justify-content: flex-start;
 line-height:30px;
 margin-bottom:26px;
}
.pop_top .pop_name{font-size:32px;font-family:'bold';font-weight:800;}
.pop_top .pop_sign{width:5px;height:30px;background:#191D3A;border-radius:2px;margin-right:16px;}
.home_pop .goods_host{width:100%;height:300px;margin-bottom:18px;}
.home_pop .goods_host img{width:100%;height:100%;border-radius:40px;}
.home_pop .goods_assist{ display: flex; justify-content: flex-start;width:100%;}
.home_pop .goods_assist img{width:340px;height:400px;border-radius:40px;}
.home_pop .goods_assist img:first-child{margin-right:18px;}
.home_part{width:100%;height:20px;background:#F8F8F8;margin-bottom:32px;}
.home_super{width:700px;margin:0 auto;margin-top:36px;}
.super_top{
 display: flex;
 justify-content: flex-start;
 line-height:30px;
 margin-bottom:26px;
}
.super_top .super_sign{width:5px;height:30px;background:#191D3A;border-radius:2px;margin-right:16px;}
.super_top .super_name{font-size:32px;font-family:'bold';font-weight:800;}
.super_top .super_exp{color:#9B9B9B;margin-left:16px;}
.home_super .super_host{width:100%;height:300px;margin-bottom:20px;}
.home_super .super_host img{width:100%;height:100%;border-radius:40px;}
.home_super .super_assist{  
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify;
  margin-bottom:32px;
}
.home_super .super_assist img{width:216px;height:272px;border-radius:40px;}
.home_super .super_line{width:700px;margin:0 auto;height:2px;border-top:2px solid #E4E4E4;margin:20px auto;}
.home_list{width:100%;padding-bottom:100px;margin-top:28px;}
.home_list .super_top{margin-left:26px;}
.home_list .list_cont{width:704px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap: wrap;}
.list_info{width:340px;height:660px;background:#FFF;border:2px solid #E4E4E4;border-radius:24px;margin-bottom:24px;overflow: hidden;}
.list_info .ocn_img{width:100%;height:340px;}
.list_menu{width:330px;padding:0 0 0 10px;border-radius:32px 32px 24px 40px;background:#FFF;}
.list_title{color:#000000;height:80px;font-size:28px;overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.list_store{color: #333334;font-size:24px;overflow: hidden;margin:12px 0;height:38px;}
.list_store .store_type{padding:0px 8px;text-align:center;font-size:18px;color:#fff;background:#FF2741;border-radius:4px;margin-right:8px;display: inline-block;}
.list_store .store_title{line-height:40px;margin:12px 0;height:40px;}
.list_rebate{font-size:24px;color:#FE3B30;margin-bottom:20px;display: flex;justify-content: space-between;}
.list_price{display:flex;justify-content:flex-start;height:50px;overflow: hidden;}
.list_price .price_now{font-size:36px;color:#FE3B30;font-weight:bold;max-width:196px;}
.list_price .price_now small{font-size:20px;}
.list_price .price_old{color:#9B9B9B;font-size:20px;text-decoration:line-through;line-height:60px;margin-left:8px;}
.list_sale{font-size:24px;color:#9B9B9B;margin-right:18px;}
.list_quan span{font-size:32px;font-weight:bold;}
.quan_num{margin-bottom:18px;}
.quan_info{padding:2px 8px;background:#FFE514;border-radius:4px;font-size:18px;text-align: center;color:#333334;}
.quan_num span.num{font-size:20px;font-weight:bold;color:#333334;}
.activity a{text-decoration: none;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
.moods_explain .frah{color:#8F8CEA;}
.home_mater .activity_right{background:#E1E1F7;}
.home_mater .activity_bottom{background:#F6CFDB;}
</style>
